<template>
  <!-- 商品分类的参数 -->
  <div>
    <!--      面包屑导航栏-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 警告提示 -->
      <el-alert
        show-icon
        title="注意：只允许为第三极分类设置相关参数"
        type="warning"
        :closable="false"
      >
      </el-alert>

      <el-row class="cat_opt">
        <el-col>
          <span>选择商品分类：</span>
          <!-- 选择商品分类的级联 -->
          <el-cascader
            expand-trigger="hover"
            v-model="selectdeCateKeys"
            :options="catelist"
            :props="cateProps"
            @change="handleChange"
          >
          </el-cascader>
        </el-col>
      </el-row>

      <!-- tab页签区域  v-model：数据双向绑定，值是name属性 -->
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <!-- 添加动态参数面板 -->
        <el-tab-pane label="动态参数" name="first">
            <!-- 通过计算属性，判断选中的是否为三级菜单，不是则按钮不可点击 -->
            <el-button type="primary" size="mini" :disabled="isBtnDisabled">添加参数</el-button>
            <!-- 参数表格区域 -->
            <el-table :data="tabFirstData" border stripe>
                <!-- 展开行 -->
                <el-table-column type="expand"></el-table-column>
                <!-- 索引列 -->
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column lebel="参数名称" prop="name"></el-table-column>
                <!-- 操作列 -->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
       
       <!-- 添加静态属性面板 -->
        <el-tab-pane label="静态属性" name="second">
            <!-- 通过计算属性，判断选中的是否为三级菜单，不是则按钮不可点击 -->
            <el-button type="primary" size="mini" :disabled="isBtnDisabled">添加属性</el-button>
             <!-- 静态属性表格区域 -->
            <el-table :data="tabSecondData" border stripe>
                <!-- 展开行 -->
                <el-table-column type="expand"></el-table-column>
                <!-- 索引列 -->
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column lebel="属性名称" prop="name"></el-table-column>
                <!-- 操作列 -->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
      
      </el-tabs>
    </el-card>
  </div>
</template>


<script>
export default {
  data() {
    return {
      // 分类列表数据
      catelist: [
        {
          id: 1,
          name: "Jack",
          children: [
            {
              id: 11,
              name: "Ashley",
              children: [
                {
                  id: 21,
                  name: "Ashley",
                },
              ],
            },
          ],
        },
      ],
      //级联选择框配置属性
      cateProps: {
        value: "id",
        label: "name",
        children: "children",
      },
      //级联选择器选中的值（id）数组
      selectdeCateKeys: [],
    //默认初始化被激活的页签名称
    activeName : 'first',
    //获取到的参数的数据
    tabFirstData : [],
    // 获取到的属性的数据
    tabSecondData : [],

    };
  },

  created() {
    //   创建时执行获取分类列表
    this.getCateList();
  },
  //计算属性
  computed:{
      //控制按钮的disable属性
      isBtnDisabled(){
          if(this.selectdeCateKeys.length !==3){
              return true
          }else{
              return false
          }
      },
      //当选择三级类别时，返回当前的类别id
      cateId () {
           if(this.selectdeCateKeys.length !==3){
            // 一共三级分类，返回数组最后一项
               return this.selectdeCateKeys[2]
           }else{
               return null
           }
      }
  },

  methods: {
    //获取分类列表
    async getCateList() {
      //   const { data: res } = await this.$http.get("category");
      //   if (res.stauts !== 200) {
      //     return this.$message.error("获取分类失败");
      //   }
      // 保存到本地
      //   this.catelist = res.data;
    },

    //级联选择框选中项变化，会触发这个函数
     handleChange() {
        this.getParamsData();
    },
    //tab页签点击事件，切换参数和属性，
    // 每次切换通过activeName作为参数，重新请求当前类别的参数或者属性
     handleTabClick(){
        console.log(this.activeName)
        this.getParamsData();
    },
    // 自定义请求接口方法，需要多次调用
    async getParamsData(){
        console.log(this.selectdeCateKeys);
      //要求只能选择三级分类，只需要判断选中的数组长度是否为3
      if (this.selectdeCateKeys / length !== 3) {
        // 如果不是长度不是3，清空数组，返回
        this.selectdeCateKeys = [];
        return;
      }
    //   如果选中的是三级分类,根据类别id请求接口
       const {data : res} = await this.$http.get(`category/${this.cateId}/attributes`,{params:{sel:this.activeName}})
        if(res.status !==200){
             return this.$message.error("获取分类失败");
        }
        // 因为返回的数据有参数和属性，所以需要判断点击的tab标签名，再取出数据
        if(this.activeName == 'first'){
            this.tabFirstData = res.data
        }else{
            this.tabSecondData = res.data
        }
    }
  },
};
</script>


<style scoped>
.cat_opt {
  margin: 15px 0;
}
</style>